<template>
  <div></div>
  <div class="common-layout">
    <el-container>
      <div>
        <el-aside width="auto">
          <Menu></Menu>
        </el-aside>
      </div>
      <el-container>
        <el-header style="margin-top: 10px;margin-right: 5px;margin-bottom: 5px;border-radius: 17px;background: #ffffff;box-shadow:  5px 5px 17px #d1d1d1,
             -5px -5px 17px #ffffff;">
          <IndexHeader :messageList="messageList"></IndexHeader>
        </el-header>
        <el-main class="cat-index-main" style="height: 80vh;margin-right: 5px;border-radius: 17px;background-size: cover;background-image: url('/img/background.png');box-shadow:  5px 5px 17px #d1d1d1,
             -5px -5px 17px #ffffff;overflow-y: auto;overflow-x: hidden">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import "../assets/index.css"
import Menu from "@/components/catIndex/catindexhome/IndexMenu.vue";
import IndexHeader from "@/components/catIndex/catindexhome/IndexHeader.vue";
import {onMounted} from "vue";
import {useStore} from "@/stores"
import {get} from "@/net";

const store = useStore();
const messageList = store.messageList
let client;
let socket;
// 判断当前浏览器是否支持webSocket


onMounted(
    () => {
      getFriendList()
      websocketConnect()
    }
)
const getFriendList = () => {
  get(`/cat/message/getFriendList/${store.auth.user.id}`, (data) => {
    store.friendList.friendList = data.data
  }, (data) => {

  })
}
const websocketConnect = () => {
  if (window.WebSocket) {
    socket = new WebSocket("wss://www.ourcats.top/webSocket")
    getMessage()
    // 相当于channel的read事件，ev 收到服务器回送的消息
    socket.onmessage = function (ev) {
      let message = JSON.parse(ev.data)
      if (message.message !== undefined) {
        if (!store.userList.userList.some(one => one.id == message.fromUserId)) {
          let find = store.friendList.friendList.find(one => one.id == message.fromUserId);
          if (find == null) {
            get(`/cat/user/${message.fromUserId}`, (data) => {
              let user
              if (message.fromUserId[0] == 'G') {
                user = {
                  id: message.fromUserId,
                  avatar: data.data.avatar,
                  username: data.data.username,
                  isGroup: true,
                  level: 0,
                  newMessage: '',
                  newMessageName: ''
                }
              } else {
                user = {
                  id: message.fromUserId,
                  avatar: data.data.avatar,
                  username: data.data.username,
                  isGroup: false,
                  level: 0,
                  newMessage: ''
                }
              }
              store.userList.userList.push(user)
              let one = store.userList.userList.find(one => one.id == message.fromUserId)
              ++one.level
              if (message.type == 2) {
                one.newMessage = '图片'
              } else
                one.newMessage = message.message
              one.newMessageName = message.messageUser
            })
          } else {
            store.userList.userList.push(find)
            let one = store.userList.userList.find(one => one.id == message.fromUserId)
            ++one.level
            if (message.type == 2) {
              one.newMessage = '图片'
            } else
              one.newMessage = message.message
            one.newMessageName = message.messageUser
          }
        } else {
          let one = store.userList.userList.find(one => one.id == message.fromUserId)
          ++one.level
          if (message.type == 2) {
            one.newMessage = '图片'
          } else
            one.newMessage = message.message
          one.newMessageName = message.messageUser
        }
        messageList.push(message)
        ++store.MessageNum
      }
    }
    // 相当于连接开启
    socket.onopen = function (ev) {
      console.log("连接开启了...")
      socket.send(
          JSON.stringify({
            // 连接成功将，用户ID传给服务端
            uid: store.auth.user.id
          })
      );
    }
    // 相当于连接关闭
    socket.onclose = function (ev) {
      console.log("连接关闭了...")
    }
  } else {
    alert("当前浏览器不支持webSocket")
  }
}

const getMessage = () => {
  get(`/cat/auth/message/${store.auth.user.id}`, (data) => {
    let list = data.data.map(one => one.fromUserId)
    let set = [...new Set(list)]
    messageList.push.apply(messageList, data.data)
    store.MessageNum = data.data.length
  }, (data) => {

  })

}


</script>
<style scoped>


</style>